<script setup lang="ts">
import { Message } from '../../packages/index';
import BlockBox from "../BlockBox.vue";
import sdkicon from "earthsdk-icon";
//随机颜色
const getColor = () => {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

const copyClipboard = (text: string = '') => {
    navigator.clipboard.writeText(text)
        .then(function () {
            Message.success('复制成功');
        }, function () {
            Message.error('复制失败');
        });
}
</script>
<template>
    <BlockBox text="内部图标测试">
        <div class="icon-box">
            <div class="icon-item" v-for="(item, index) in sdkicon.components" @dblclick="copyClipboard(item.name)"
                :key="index" :style="{ color: getColor() }" title="双击复制">
                <component :is="item" />
                <div style="margin-top: 10px;font-size: 14px;"> {{ `
                    <${item.name} />` }}
                </div>
            </div>
        </div>
    </BlockBox>
</template>
<style scoped lang="css">
.icon-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.icon-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    user-select: none;
    margin: 40px;
    cursor: pointer;
    font-size: 30px;
}
</style>
